<template>
    <div id="app">
        <!--333-->
        <div class="detaile_bottom">
            <div class="detaile_bottom_left">
                <p>
                    <router-link to="/home" class="iconfont icon-home"></router-link><br>
                    <span>首页</span>
                </p>
                <p>
                    <router-link to="" class="iconfont icon-fenxiang"></router-link><br>
                    <span>推荐</span>
                </p>
                <p>
                    <router-link to="" class="iconfont icon-shoucang"></router-link><br>
                    <span>收藏</span>
                </p>
            </div>
            <div class="detaile_bottom_right">
                <button @click="">加入购物车</button>
                <button @click="">立即购买</button>
            </div>
        </div >
    </div>
</template>

<script>
    export default {
        name: "detaile_bottom"
    }
</script>

<style scoped>
    /*底部的菜单*/
    .detaile_bottom{
        width: 100%;
        height: 65px;
        position: fixed;
        bottom: -1px;
        background: white;
        display: flex;
        padding: 5px 15px;
        border-top: 1px solid #aaa;
    }
    /*左边的图标*/
    .detaile_bottom_left{
        flex: 1;
        display: flex;
    }
    .detaile_bottom_left p{
        flex: 1;
    }
    /*右边的按钮部分*/
    .detaile_bottom_right {
        flex: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .detaile_bottom_right button{
        width: 46%;
        padding: 5px 10px;
        border: none;
        outline: none;
        border-radius: 20px;
        background: #D75E57;
        color: white;
    }
    a{
        color: black;
    }
</style>